<!--
  Generated template for the OrderDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<!-- <ion-header>

  <ion-navbar>
    <ion-title>订 单 详 情</ion-title>
  </ion-navbar>

</ion-header> -->


<ion-content>

  <div class="order_status">
    <img src="assets/imgs/51.png" alt="">
    <div>订单详情</div>
    <ion-icon name="ios-arrow-dropleft-circle" (click)="back()"></ion-icon>
    <p *ngIf="orderDetail"> {{orderDetail.status_name}}</p>
    <!-- <p *ngIf="orderDetail && orderDetail.order_status == 99">等待商家确定总价</p> -->
  </div>
  <ng-container *ngIf="orderDetail">
    <div class="g_label">
      <img src="assets/imgs/order1.png"> 订单信息：
    </div>
    <div class="order_address">
      <p class="header">
        收货地址：{{orderDetail.receiver_name}} ，{{orderDetail.receiver_mobile}}， {{orderDetail.receiver_province_name}} {{orderDetail.receiver_city_name}}
        {{orderDetail.receiver_district_name}} {{orderDetail.receiver_address}}
      </p>
      <p class="header">
        买家留言：{{orderDetail.buyer_message}}
      </p>
      <p class="header">订单编号：
        <span> {{orderDetail.order_no}}</span>
      </p>
      <p class="header">下单时间：
        <span> {{orderDetail.create_time*1000 | date:"yyyy-MM-dd hh:mm:ss"}}</span>
      </p>
      <p class="header" *ngIf="orderDetail.pay_time !=0">支付时间：
        <span> {{orderDetail.pay_time*1000 | date:"yyyy-MM-dd hh:mm:ss"}}</span>
      </p>
      <p class="header" *ngIf="orderDetail.consign_time !=0">发货时间：
        <span> {{orderDetail.consign_time*1000 | date:"yyyy-MM-dd hh:mm:ss"}}</span>
      </p>
      <p class="header" *ngIf="orderDetail.finish_time !=0">完成时间：
        <span> {{orderDetail.finish_time*1000 | date:"yyyy-MM-dd hh:mm:ss"}}</span>
      </p>
    </div>
    <section class="interval"></section>
    <div class="goods_list">
      <p class="g_label">
        <img src="assets/imgs/goods.jpg">订单商品：</p>
      <ion-list>
        <ion-item *ngFor="let ele of orderDetail.order_goods">
          <ion-label>
            <image [src]="ele.picture_info.pic_cover_mid" alt="" tappable (click)='openDetail($event,ele.goods_id)'></image>
            <div tappable (click)='openDetail($event,ele.goods_id)'>
              <p class="name" tappable>{{ele.goods_name}}</p>
              <p class="type" *ngIf="ele.qiu && orderDetail.order_type==1">柱镜：{{ele.zhu}}  /  球镜：{{ele.qiu}}</p>
              <p class="type" *ngIf="ele.sku_name && orderDetail.order_type==1">规格：{{ele.sku_name}}</p>
              <p *ngIf="orderDetail.order_type==1" class="price">价格：¥ {{ele.price}}</p>
              <p *ngIf="orderDetail.order_type==3" class="type">查看详情</p>
            </div>
            <div class="refund" tappable (click)="refund($event,ele.order_goods_id)" *ngIf="(orderDetail.order_status == 1 || orderDetail.order_status == 2) && !ele.status_name">
              退款/退货
            </div>
            <div class="refund" tappable *ngIf="ele.status_name" (click)="refundDetail($event,ele.order_goods_id)">
              {{ele.status_name}}
            </div>
            <div class="nums">
              数量：{{ele.num}}
            </div>
          </ion-label>
        </ion-item>
      </ion-list>
    </div>
    <div class="total">
      商品总价：
      <span *ngIf="orderDetail"> ¥ {{orderDetail.goods_money}}</span>
      <p>商品总数：
        <span>{{goodsCount}}</span>
      </p>
    </div>
    <div class="price_list">
      <p>物流费用：
        <span>{{orderDetail.shipping_money}}</span>
      </p>
      <p>余额抵扣：
        <span>-{{orderDetail.user_platform_money}}</span>
      </p>
      <p>积分抵扣：
        <span>-{{orderDetail.point_money}}</span>
      </p>
      <p>优惠券抵扣：
        <span>-{{orderDetail.coupon_money}}</span>
      </p>
      <p>实付费用：
        <span>{{orderDetail.pay_money}}</span>
      </p>
      <!-- <p *ngIf="orderDetail.seller_memo">卖家留言：
        <span>{{orderDetail.seller_memo}}</span>
      </p> -->
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 0">
      <span tappable (click)="closeOrderConfirm()">关闭订单</span>
      <span tappable (click)="orderPay(orderDetail)">去 付 款</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 1">
      <span tappable (click)="orderTakeDelivery()">确认收货</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 2 ">
      <span tappable (click)="orderTakeDelivery()">确认收货</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 3">
      <span tappable (click)="closeOrderConfirm()">关闭订单</span>
      <span *ngIf="orderDetail.is_evaluate!=1" tappable (click)="evaluate()">去 评 价</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == -1">
      <span tappable>点击上方查看退款进度</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 4 ">
      <span tappable (click)="closeOrderConfirm()">关闭订单</span>
    </div>
    <div class="btn_group" *ngIf=" orderDetail.order_status == 5">
      <span tappable (click)="deleteOrder()">删除订单</span>
    </div>
    <div class="btn_group" *ngIf="orderDetail.order_status == 99 ">
        <span tappable (click)="closeOrderConfirm()">关闭订单</span>
      </div>
    <section class="interval"></section>
    <div class="service">
      <!-- <button ion-button icon-start small>
        <ion-icon name="md-ionitron"></ion-icon>
        <a target="_blank" [href]="'http://wpa.qq.com/msgrd?v=3&uin='+appInfo.web_qq+'&site=qq&menu=yes'">联系客服</a>
      </button> -->
      <button ion-button icon-start small (click)="message()">
          <ion-icon name="md-ionitron"></ion-icon>
          联系客服
      </button>
      <button ion-button icon-start small>
        <ion-icon name="md-call"></ion-icon>
        <a [href]="'tel:'+appInfo?.web_phone">拨打电话{{appInfo?.web_phone}}</a>
      </button>
    </div>


    <ng-container *ngIf="expressName">
      <section class="interval"></section>
      <div class="g_label">
        <img src="assets/imgs/trace.png"> 订单跟踪：
      </div>
      <div class="shipping">
        <p>物流公司：
          <span>{{expressName}}</span>
        </p>
        <p>物流编号：
          <span style="user-select:text !important;">{{expressCode}}</span>
        </p>
      </div>
      <div class="traces">
        <p *ngIf="!tracesStatus">暂无物流追踪信息</p>
        <div class="time_line">
          <div class="line_item" *ngFor="let item of traces">
            <div class="line_text">
              {{item.AcceptTime}}
              <p>
                {{item.AcceptStation}}
              </p>
            </div>
            <div class="line_point"></div>
            <div class="line_line"></div>
          </div>
        </div>
      </div>
    </ng-container>
  </ng-container>
</ion-content>
